<html><head><meta charset="utf-8"><title>搭建基础项目-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/35" target="_blank">零基础学透 TypeScript</a>
                    <a href="" target="_blank">
                        <span>
                            / 6-1 搭建基础项目
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                搭建基础项目
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-07-24 14:09:33
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img2.mukewang.com/5d37f0cc000100a206400359.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">为中华之崛起而读书。<p class="author">——周恩来</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这一章是实战章节，我们将会使用 Vue+TypeScript 来开发一个简单管理后台，这个实战项目的目的是演示如何在Vue 项目中使用 TypeScript 进行开发，而不是为了实现一个管理后台。所以我们在开发的时候，以尽可能多的展示如何使用 TypeScript 结合 Vue 全家桶进行开发为前提，进行这个实战项目的开发，对于涉及到相同知识点的功能性代码，我们会尽可能不去重复讲解。</p>
</div><div class="cl-preview-section"><h3 id="安装vue-cli">6.1.1 安装Vue CLI</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节我们先来进行第一步，就是创建我们的初始项目，首先你需要在全局安装 Vue 命令行工具 Vue CLI，首先你要确定你安装了 NodeJS，如何安装我们已经在1.3小节讲过了，我们直接看如何安装 Vue CLI：</p>
</div><div class="cl-preview-section"><pre class="  language-shell"><code class="prism  language-shell">sudo npm install -g @vue/cli
</code></pre>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Windows系统直接运行<code>npm install -g @vue/cli</code>命令即可。</p>
</blockquote>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">因为是在全局安装，所以你可能需要以管理员身份去运行，Mac中就是前面加<code>sudo</code>然后输入密码。安装之后你可以通过检查他的版本号来确定是否成功安装：</p>
</div><div class="cl-preview-section"><pre class="  language-shell"><code class="prism  language-shell">vue -V 或者 vue --version
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">注意这里是使用<code>vue</code>命令，而不是@vue/cli，如果使用<code>-V</code>参数一定记着是大写的<strong>V</strong>，我这里安装的是<strong>3.3.0</strong>版本的，如果你发现你创建的项目和我创建的项目包含的文件或者配置信息有差异，有可能是版本差异造成的，你也可可以直接安装与我相同的版本。</p>
</div><div class="cl-preview-section"><h3 id="使用vue-cli创建项目">6.1.2 使用Vue CLI创建项目</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">安装好Vue CLI后，在终端启动Vue的可视化项目管理页面，运行如下命令：</p>
</div><div class="cl-preview-section"><pre class="  language-shell"><code class="prism  language-shell">vue ui
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">几秒钟之后就会自动打开浏览器在浏览器中打开一个本地页面，然后打开创建项目界面：<br>
<img src="http://img.mukewang.com/5d22b0e00001623624100800.png" alt="图片描述" data-original="http://img.mukewang.com/5d22b0e00001623624100800.png" class="" style="cursor: pointer;">选择要存放新项目的文件夹后，点击底部的“在此创建新项目”，然后进入配置流程，一共四个流程：“详情” - “预设” - “功能” - “配置”，我们来逐个配置。</p>
</div><div class="cl-preview-section"><h4 id="详情" style="font-size: 26px;">(1) 详情</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5d22b0f50001fdb708901436.png" alt="图片描述" data-original="http://img.mukewang.com/5d22b0f50001fdb708901436.png" class="" style="cursor: pointer;">填写项目名，这里我们写的是"vue-ts-project"，然后选择包管理器，我这里选的是npm，如果你建了git仓库，你可以在git栏填写git的仓库地址。配置完成后点击“下一步”。</p>
</div><div class="cl-preview-section"><h4 id="预设" style="font-size: 26px;">(2) 预设</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5d22b11500010ced23481092.png" alt="图片描述" data-original="http://img.mukewang.com/5d22b11500010ced23481092.png" class="" style="cursor: pointer;">每次创建一次项目，你的功能配置都可以保存为预设，方便下次直接使用，这里我们先选择手动，来手动配置项目。然后点击“下一步”。</p>
</div><div class="cl-preview-section"><h4 id="功能" style="font-size: 26px;">(3) 功能</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5d22b12e00017a8d23681798.png" alt="图片描述" data-original="http://img.mukewang.com/5d22b12e00017a8d23681798.png" class="" style="cursor: pointer;">这里我们勾选这几项：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">Babel：使用Babel可以将新特性语法转为低版本浏览器支持的语法；</li>
<li style="font-size: 20px; line-height: 38px;">TypeScript：这个肯定要勾选了，因为我们要使用TypeScript开发；</li>
<li style="font-size: 20px; line-height: 38px;">Router：我们要开发单页面SPA应用，所以页面间的跳转需要使用前端路由；</li>
<li style="font-size: 20px; line-height: 38px;">Vuex：多个页面直接或者组件之间的通信可以使用Vuex来做状态管理；</li>
<li style="font-size: 20px; line-height: 38px;">CSS Pre-processors：CSS预处理器，如果你使用Less或者Sass等CSS预处理器编写CSS样式，则勾选这项；</li>
<li style="font-size: 20px; line-height: 38px;">Linter/Formatter：代码规范或格式检查器，如果你需要使用TSLint对代码规范或格式进行检验，勾选这项；</li>
<li style="font-size: 20px; line-height: 38px;">使用配置文件：如果需要将一些插件的配置保存在各自的配置文件中，则需要勾选这项。</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">配置完成后点击“下一步”。</p>
</div><div class="cl-preview-section"><h4 id="配置" style="font-size: 26px;">(4) 配置</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5d22b14b0001137f23061272.png" alt="图片描述" data-original="http://img.mukewang.com/5d22b14b0001137f23061272.png" class="" style="cursor: pointer;"></p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这里有吉祥需要配置：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">Use class-style component syntax?</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这项勾选上代表要在类风格的组件中使用@Component装饰器</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">Use Babel alongside TypeScript for auto-detected polyfills?</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">勾选这一项后，会同时使用Babel和TypeScript对新标准语法进行转义。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">Pick a CSS pre-processor</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这里我选择的是Less，你可以根据自己习惯勾选。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">Pick a linter / formatter config</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这里是选择代码检查工具，我们使用TypeScript进行开发，所以选择TSLint。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">Lint on save</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">勾选这一项后，会在文件保存后进行代码风格和格式的检验。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">到这里配置就完成了，点击创建项目，Vue CLI会根据我们的配置生成配合文件，同时会帮我们安装好依赖。</p>
</div><div class="cl-preview-section"><h3 id="项目结构介绍">6.1.3 项目结构介绍</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5d22b1690001699703030747.png" alt="图片描述" data-original="http://img.mukewang.com/5d22b1690001699703030747.png" class="" style="cursor: pointer;"></p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下面我们来介绍下每个文件的作用：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">public文件夹
<ul>
<li style="font-size: 20px; line-height: 38px;">favicon.ico： 显示在浏览器标签栏标题前面的小图标</li>
<li style="font-size: 20px; line-height: 38px;">index.html： 编译html文件的模板</li>
</ul>
</li>
<li style="font-size: 20px; line-height: 38px;">src
<ul>
<li style="font-size: 20px; line-height: 38px;">assets： 存放一些图片、字体等静态资源</li>
<li style="font-size: 20px; line-height: 38px;">components： 一些可以复用的组件存放在这里</li>
<li style="font-size: 20px; line-height: 38px;">views： 页面视图vue文件存放在这里</li>
<li style="font-size: 20px; line-height: 38px;">main.ts： 项目入口文件</li>
<li style="font-size: 20px; line-height: 38px;">router.ts： 前端路由配置文件</li>
<li style="font-size: 20px; line-height: 38px;">shims-tsx.d.ts： 增加对JSX语法的类型支持的声明文件</li>
<li style="font-size: 20px; line-height: 38px;">shims-vue.d.ts： 用于让编译器识别.vue后缀的文件</li>
<li style="font-size: 20px; line-height: 38px;">store.ts： 状态管理vuex配置文件</li>
</ul>
</li>
<li style="font-size: 20px; line-height: 38px;">.brwserslistrc： 配置编译后的代码需要支持的浏览器列表</li>
<li style="font-size: 20px; line-height: 38px;">.gitignore： 设置提交到git时需要忽略的文件</li>
<li style="font-size: 20px; line-height: 38px;">babel.config.js： babel的配置文件</li>
<li style="font-size: 20px; line-height: 38px;">package-lock.json： 锁定依赖版本号的文件</li>
<li style="font-size: 20px; line-height: 38px;">package.json： npm项目最基本的配置文件</li>
<li style="font-size: 20px; line-height: 38px;">postcss.config.js： postcss的配置文件</li>
<li style="font-size: 20px; line-height: 38px;"><a href="http://README.md">README.md</a>： 项目介绍文件</li>
<li style="font-size: 20px; line-height: 38px;">tsconfig.json： 这个前面讲过了，TypeScript编译选项配置文件</li>
<li style="font-size: 20px; line-height: 38px;">tslint.json： TSLint配置文件</li>
</ul>
</div><div class="cl-preview-section"><h3 id="调整项目结构">6.1.4 调整项目结构</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下面我们根据开发习惯调整一下目录结构，整理后的目录如下：<br>
<img src="http://img.mukewang.com/5d22b1820001b49206181712.png" alt="图片描述" data-original="http://img.mukewang.com/5d22b1820001b49206181712.png" class="" style="cursor: pointer;"></p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们在根目录创建mock文件夹用于存放mock相关文件。在src文件夹创建api文件夹，用于存放封装的api请求方法；创建router文件夹，将原本src文件夹下的router.ts文件放在router文件夹下，并且改名为index.ts，然后把routes字段的数组抽出来放在routes.ts文件夹下默认导出：</p>
</div><div class="cl-preview-section"><pre class="  language-javascript"><code class="prism  language-javascript"><span class="token comment">// src/router/index.ts</span>
<span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Router <span class="token keyword">from</span> <span class="token string">'vue-router'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> routes <span class="token keyword">from</span> <span class="token string">'./routes'</span><span class="token punctuation">;</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Router<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Router</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// src/router/routes.ts</span>
<span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">'../views/Home.vue'</span><span class="token punctuation">;</span> <span class="token comment">// 注意这里的路径，有原来的./开头改为../，因为此时views文件夹在routes.ts文件所在文件夹的上一级</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
    name<span class="token punctuation">:</span> <span class="token string">'home'</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> Home<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/about'</span><span class="token punctuation">,</span>
    name<span class="token punctuation">:</span> <span class="token string">'about'</span><span class="token punctuation">,</span>
    <span class="token comment">// route level code-splitting</span>
    <span class="token comment">// this generates a separate chunk (about.[hash].js) for this route</span>
    <span class="token comment">// which is lazy-loaded when the route is visited.</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: "about" */</span> <span class="token string">'../views/About.vue'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在src文件夹下创建store文件夹，把原本在src文件夹下的store.ts文件放在store文件夹下，并改名为index.ts，然后创建module文件夹，用于存放拆分的vuex模块；在src文件夹创建styles文件夹，用于存放公共的样式文件；修改main.ts文件里对router和store的引用。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们还需要在根目录创建一个<em>vue.config.js</em>文件，用来配置vue项目相关配置，文件内的内容如下：</p>
</div><div class="cl-preview-section"><pre class="  language-javascript"><code class="prism  language-javascript"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> <span class="token function-variable function">resolve</span> <span class="token operator">=</span> dir <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> dir<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> BASE_URL <span class="token operator">=</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>NODE_ENV <span class="token operator">===</span> <span class="token string">'production'</span>
  <span class="token operator">?</span> <span class="token string">'./'</span>
  <span class="token punctuation">:</span> <span class="token string">'/'</span>
  
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  publicPath<span class="token punctuation">:</span> BASE_URL<span class="token punctuation">,</span> <span class="token comment">// 公共文件路径</span>
  lintOnSave<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 在保存文件的时候对代码进行格式校验</span>
  chainWebpack<span class="token punctuation">:</span> config <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    config<span class="token punctuation">.</span>resolve<span class="token punctuation">.</span>alias
      <span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'@'</span><span class="token punctuation">,</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 配置便捷路径，凡是src这一级路径都可以用@代替</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这样我们的项目就算基本创建完成，后面我们会通过具体的功能开发，讲解vue全家桶的TypeScript开发用法。现在你可以通过如下命令启动项目：<code>npm run serve</code>启动后打开终端显示的url在浏览器打开项目页面。下个小节我们来封装axios，用它来进行接口调用。</p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/370">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    书写声明文件之砍柴：为不同类型库书写声明文件
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/372">
                                                    <div class="next r clearfix">
                                <p>
                                    封装接口请求
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">     <div class="number">精选留言 <span class="js-number">0</span></div>     <div class="comments">         <div class="input-fake js-showcommentModal">             欢迎在这里发表留言，作者筛选后可公开显示         </div>                      <div class="noData">                 <p>                     <i class="imv2-error_c"></i>                 </p>                 <p>目前暂无任何讨论</p>             </div>              </div>  </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>